<template>
   <div>
	   <!--面包屑区域-->
	   <el-breadcrumb separator-class="el-icon-arrow-right">
	     <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	     <el-breadcrumb-item>公告管理</el-breadcrumb-item>
	   </el-breadcrumb>
	   <!--卡片视图-->
	   <el-card >
		   <el-row :gutter="20">

			<el-col :span="7">
			  <el-date-picker
			    v-model="searchDate"
			    type="date"
			    placeholder="选择发布日期"
			    @change="handleDateChange()"
				value-format="yyyy-MM-dd">
			  </el-date-picker>
			</el-col>
			
			<el-col :span="4">
				<el-button type="primary" @click="handleAdd">添加公告</el-button>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="list">公告信息列表</el-button>
			</el-col>
			
			</el-row>
	   </el-card>

	    <!--表格-->
		<el-table
	       :data="tableData"
	       style="width: 100%"
	       max-height="500">
	       <el-table-column
	         fixed
	         prop="announcementID"
	         label="公告编号"
	         width="200">
	       </el-table-column>
	       <el-table-column
	         prop="title"
	         label="标题"
	         width="200">
	       </el-table-column>
	       <el-table-column
	         prop="content"
	         label="公告内容"
	         width="250">
	       </el-table-column>
		   <el-table-column
	         prop="publishDate"
	         label="发布日期"
	         width="250">
	       </el-table-column>
		   <el-table-column
	         prop="publisher"
	         label="发布人"
	         width="250">
	       </el-table-column>

	       <el-table-column
	         fixed="right"
	         label="操作"
	         width="100">
	         <template slot-scope="scope">
				<el-button	
	             @click="handleEdit(scope.row)"
	             type="text"
	             size="small">
	             编辑
	           </el-button>
	           <el-button
	             @click="deleteRow(scope.row.announcementID)"
	             type="text"
	             size="small">
	             移除
	           </el-button>
	           
	         </template>
	       </el-table-column>
	     </el-table>

   <!-- 文本框 -->
	   <el-dialog
	     title="编辑公告信息"
	     :visible.sync="dialogVisible"
	     width="40%"
	     :before-close="handleClose">
		 <el-form :label-position="labelPosition" label-width="80px" :model="form"  :rules="rules" >
		   <el-form-item label="标题" prop="title">
				 <el-input v-model="form.title"></el-input>
		   </el-form-item>
		   <el-form-item label="内容" prop="content">
		     <el-input v-model="form.content"></el-input>
		   </el-form-item>
		   <el-form-item label="发布日期" required>
        <el-col :span="11">
          <el-form-item prop="productDate">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.publishDate" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
      </el-form-item>
		   <el-form-item label="发布者" prop="publisher">
		     <el-input v-model="form.publisher"></el-input>
		   </el-form-item>
		 </el-form>
	     <span></span>
	     <span slot="footer" class="dialog-footer">
	       <el-button @click="dialogVisible = false">取 消</el-button>
	       <el-button type="primary" @click="handleSubmit">确 定</el-button>
	     </span>
	   </el-dialog>
   </div>
</template>

<script>
	export default{
		mounted(){
			this.list();
		},

		methods: {

			handleDateChange() {
    			if (this.searchDate) {
  				  // 将用户选择的日期转换为 UTC 时间
  				  const utcDate = new Date(this.searchDate).toISOString();
  				  // 发送 UTC 时间到后端
  				  this.fetchData(utcDate);
  				} else {
  				  // 如果日期为空，重新加载列表数据
  				  this.list();
  				}
    		},
    		fetchData(utcDate) {
    			this.axios.get('/AnnouncementsSearchByDate', {
    			  params: {
					publishDate:  utcDate
    			  }
    			}).then(response => {
    			  this.tableData=response.data.data;
				console.log(response.data.date);
    			}).catch(error => {
    			  console.error(error);
    			});
    		},

			handleAdd() {
				this.dialogVisible = true;
				 // 重置 allid，确保在添加新公告时不会执行编辑操作
				 this.allid = '';
			},
			handleEdit(row) {
				this.dialogVisible = true;
				this.form = JSON.parse(JSON.stringify(row));
				this.allid=row.announcementID;
			},

			handleClose(){
				this.dialogVisible = false;
				// 重置表单数据
  				this.form = {
  				 	announcementID: '',
  				 	title: '',
  				 	content: '',
  				 	publishDate: '',
  				 	publisher: ''
  				};
				this.list();
			},

			handleSubmit(){
				if(this.allid){
					this.editDataToTable();
				}else{
					this.addDataToTable();
				}
				this.handleClose();
			},
			
			editDataToTable(){
				this.axios.post('AnnouncementsModify', this.form)
       			.then(response => {
       		  	if (response.data.code === 200) {
       				this.$message.success(response.data.message);
       			} else {
       			  this.$message.warning(response.data.message);
       			}
       			})
       			.catch(error => {
       			  console.error(error);
       			  this.$message.error(error.response.data.message);
       			});
            },
			
			list() {
			     this.axios.post('AnnouncementsList', {})
			    .then(response => {
					this.tableData=response.data.data.list;
			     })
			    .catch(error => {
			       console.error(error);
			     });
			},
			
		      deleteRow(id) {
		        this.axios.get("AnnouncementsRemove",{
		            params: {
						announcementID: id
		            }
		          })
		        .then(
		        	response=>{
		        		this.list();
		        		console.log(response.data);
		        			this.$message.success('删除成功'); 
		        	}
		        )
		        .catch(error => {
		           console.error(error);
		         });
				},
				
			  	addDataToTable() {  
			       this.axios.post('/AnnouncementsAdd', this.form)
			       			
			       .then(response => {
					   
			          if (response.data.code === 200) {
			          	this.$message({
			          	  message: response.data.message,  
			          	  type: 'success'  
			          	});  
			          }else{
			          	this.$message({
			          	  message: response.data.message,  
			          	  type: 'warning' 
			          	  });  
			          }
					   this.dialogVisibleAdd = false;
          			   this.list();
			        })
			       	.catch(error => {
			       	        console.error(error);  
			       	        this.$message({  
			       	        message: error.response.data.message,  
			       	        type: 'error'  
			       	        });  
			       	    });  
				},  

		    },

		data(){
			return {

				allid: '',

				searchDate: null,
			    goods: 5,
				dialogVisible:false,
				labelPosition: 'right',
				
			    form:{
					announcementID: '',  
					title: '', 
					content: '',  
					publishDate: '',
					publisher:''
			    },
				
				rules: {
				  title: [
				    { required: true, message: '请输入标题', trigger: 'blur' }
				  ],
				  content: [
				    { required: true, message: '请输入内容', trigger: 'blur' }
				  ],
				  publishDate: [
				    { required: true, message: '请选择发布日期', trigger: 'change' }
				  ],
				  publisher: [
				    { required: true, message: '请输入发布者', trigger: 'blur' }
				  ]
				},  

				tableData:[]
			};
		},
			
	}
</script>

<style lang ="less" scoped>


</style>